{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
{% import "bootstrap/utils.html" as util %}

{% block title %}Pathway Overlap Comparison{% endblock %}


{% block styles %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'/>

    <style>

        /* Fuse dynamic field buttons */

        [data-role="dynamic-fields"] > .form-inline + .form-inline {
            margin-top: 0.5em;
        }

        [data-role="dynamic-fields"] > .form-inline [data-role="add"] {
            display: none;
        }

        [data-role="dynamic-fields"] > .form-inline:last-child [data-role="add"] {
            display: inline-block;
        }

        [data-role="dynamic-fields"] > .form-inline:last-child [data-role="remove"] {
            display: none;
        }

        /* Gene Sets in table info */

        td {
            overflow: scroll;
        }

        /* VennDiagram CSS */

        svg path {
            stroke: white;
            stroke-width: 1px;
        }

        #overlap-venn-diagram svg text {
            fill: white;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        {#font-size: 12px !important;#}
        }

        .venntooltip {
            position: absolute;
            text-align: center;
            width: 128px;
            height: 25px;
            background: #333;
            color: #ddd;
            padding: 2px;
            border: 0px;
            border-radius: 8px;
            opacity: 0;
        }


    </style>
{% endblock %}

{% import "meta/macros.html" as compath %}


{% block scripts %}
    {{ super() }}
    {% include "dependencies/common.html" %}
    {% include "dependencies/venn.html" %}

    <script type="text/javascript"
            src="{{ url_for('static', filename='js/overlap_controller.js', version='20180501') }}"></script>
{% endblock %}

{% block content %}
    <div class="container" style="margin-top: 50px">
        {{ util.flashed_messages(dismissible=True, container=False) }}

        <div class="panel panel-default">
            <div class="panel-heading">Visualize Gene Set Overlap across Pathways</div>
            <div class="panel-body">
                <div>
                    <p>
                        Select the database of interest, and then type the name of a pathway in this database. After
                        selecting two or more pathways, click in the "Render Plot" button to see the Euler diagram
                        representing the overlaps between the pathway selection.
                        To explore the overlap, <b>double click</b> in the circles to reveal the pathway overlap.
                    </p>

                    <p>
                        <b>Use Case:</b> Investigate the overlaps between the Alzheimer's disease pathways in KEGG,
                        Reactome, and WikiPathways. For that, select the corresponding databases and type "Alzheimer"
                        and select the corresponding pathways in each database. Finally, click in "Render Plot".
                    </p>
                </div>
                <div>
                    <form id="venn-diagram-form">
                        <div data-role="dynamic-fields">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label class="sr-only" for="pathway">Pathways</label>

                                    <select type="text" class="form-control" name="resources[]" id="select-1">
                                        {% for manager in manager_names %}
                                            {% if manager not in BLACK_LIST %}
                                                <option value="{{ manager }}">{{ compath.stylize_plugin_name(STYLED_NAMES, manager) }}</option>
                                            {% endif %}
                                        {% endfor %}
                                        <input type="text" class="form-control" name="pathways[]" id="input-1"
                                               placeholder="Select the Pathway to compare"
                                               style=" min-width: 500px;">
                                    </select>
                                </div>
                                <button class="btn btn-danger" data-role="remove">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </button>
                                <button class="btn btn-primary" data-role="add">
                                    <span class="glyphicon glyphicon-plus"></span>
                                </button>
                            </div>  <!-- /div.form-inline -->
                        </div> <!-- /div[data-role="dynamic-fields"] -->
                        <div class="text-center" style="margin-top: 20px; margin-bottom: 20px">
                            <input class="btn btn-primary btn-lg" value="Render Plot" type="submit">
                        </div>
                        <div id="overlap-venn-diagram"></div>
                    </form>
                </div>
            </div>
            <table id="info-table" class="table table-bordered table-hover table-responsive"></table>
        </div>
    </div>
    {% include "meta/footer.html" %}
{% endblock %}
